<template>
	<div class="w100  bgfff bra8 pad10 mt10" v-loading="loading1">

		<div class="displayFlex">
			<div class="date-item displayFlex">
				<el-date-picker v-model="params.monthDateCheck" type="month" placeholder="选择月" size="mini"
					@change="formLineData()" value-format="yyyy-MM" style="width: 80px;">
				</el-date-picker>
				<i class="el-icon-arrow-down"></i>
			</div>
			<el-button type="primary" icon="el-icon-download" size="small" @click="exportExcle" class="ml20">
				导出
			</el-button>
		</div>

		<div v-if="parameterAmountList && parameterAmountList.length > 0" class="mt10">
			<!-- <div style="padding: 10px;margin-bottom: 10px;color: #999;display: inline-block;cursor: pointer;">
				<div v-for="(item,index) in defenceList" :key="index" @click="formLineData(item)"
					:class="[item.defenceId == params.defenceId?'defenceSelectClass':'']"
					style="display: inline-block;margin-right: 20px;">
					{{item.defenceName}}
				</div>
			</div> -->
			<div v-for="(item,index) in parameterAmountList" :key="index">
				<div style="color:#888;margin-bottom:-20px" class="font12 ml30">{{item.parameterName}}</div>
				<div :id="'lineChart'+index"
					style="width: 100%;height: 300px;margin-bottom: 10px;border-radius: 16px;padding: 20px 0;"></div>
			</div>

		</div>
		<el-empty v-else text="暂无内容" />
	</div>
</template>

<script>
	import {
		Session
	} from '@/utils/storage';
	import moment from 'moment'
	import * as echarts from 'echarts';

	let that
	export default {
		props: ['defenceId', 'outletId'],
		data() {
			return {
				params: {
					outletId: '',
					outletName: '',
					monthDate: moment().format('YYYY-MM-DD'),
					monthDateCheck: moment().format('YYYY-MM'),
					defenceId: ''
				},
				defenceList: [],
				parameterAmountList: [],
				loading1: false,
			}
		},
		mounted: function() {
			that = this
			that.params.defenceId = that.defenceId
			that.params.outletId = that.outletId
			that.formLineData()
		},

		methods: {

			exportExcle() {
				let loading = this.$loading({
					lock: true,
					text: '加载中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				//let appPath = "http://192.168.0.108:8081/"
				let appPath = "https://www.weifeibangbang.com/"
				that.params.recordDate = that.params.monthDateCheck + "-01"
				window.open(
					appPath + '/productionEquipment/stdBook/downloadWaterDefenceParameter?str=' + JSON.stringify(that
						.params) + "&ticketId=" + that.$store.state.token)
				loading.close();
			},

			async formLineData() {
				//if (item && item.defenceId) that.params.defenceId = item.defenceId

				function getParameterAmountListByDefenceId() {
					that.loading1 = true
					return new Promise((resolve, reject) => {
						var param = JSON.parse(JSON.stringify(that.params));
						param.recordDate = param.monthDateCheck + "-01"
						that.ajax({
							url: '/waterInspect/getParameterAmountListByDefenceId',
							dataType: 'json',
							data: JSON.stringify(param),
							contentType: 'application/json',
							success: function(result) {
								that.loading1 = false
								resolve(result.data)
							}
						})
					})
				}

				let dataList = await getParameterAmountListByDefenceId()
				that.parameterAmountList = dataList
				setTimeout(function() {
					for (let key in dataList) {
						let chartDom = document.getElementById('lineChart' + key);
						let myChart = echarts.init(chartDom);
						let option;
						let thisData = dataList[key]

						let series = [{
							name: thisData.parameterName,
							type: 'line',
							data: [],
							markPoint: {
								data: [{
									type: 'max',
									name: 'Max'
								}]
							},
							markLine: {
								label: {
									show: true,
									formatter: function(params) {
										return params.name + "：" + params.value
									}
								},
								data: []
							},
							label: {
								show: true,
								position: 'top',
								formatter: function(data) {
									if (thisData.maxValue) {
										if (thisData.maxValue < data.value && thisData.minValue > data.value) {
											return '{a|' + data.value + '}'

										}
									}
									if (thisData.minValue) {
										if (thisData.minValue <= data.value) {
											return '{b|' + data.value + '}'
										}
									}
								},
								rich: {
									'a': {
										color: '#ffc200'
									},
									'b': {
										color: '#EE6666'
									}
								}
							},
							itemStyle: {
								color: (params) => {
									if (thisData.maxValue) {
										if (thisData.maxValue < params.data && thisData.minValue > params.data) {
											return '#ffc200'
										}
									}
									if (thisData.minValue) {
										if (thisData.minValue <= params.data) {
											return '#EE6666'
										}
									}
								}
							}
						}]

						let xSeries = []
						for (let item of thisData.list) {
							xSeries.push(item.date)
							series[0].data.push(item.amount)
						}
						if (thisData.minValue) {
							series[0].markLine.data.push({
								name: '最小值',
								yAxis: thisData.minValue
							})
						}
						if (thisData.maxValue) {
							series[0].markLine.data.push({
								name: '最大值',
								yAxis: thisData.maxValue
							})
						}

						option = {
							title: {
								show: false // 设置不显示标题
							},
							tooltip: {
								trigger: 'item',
								axisPointer: {
									type: 'shadow'
								}
							},
							grid: {
								top: "6%",
								bottom: "10%",
								left: "5%"
							},
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: xSeries,
								splitLine: {
									show: false,
								},
								axisTick: {
									show: false // 不显示坐标轴刻度线
								},
								axisLine: {
									lineStyle: {
										opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
									}
								},
							},
							dataZoom: [{
									type: 'inside',
									start: 0,
									end: 20
								},
								{
									start: 0,
									end: 20
								}
							],
							yAxis: {
								name: thisData.parameterName,
								type: 'value',
								splitLine: {
									show: true,
									lineStyle: {
										color: ["#f0f0f0"],
									},
								},
								axisTick: {
									show: false // 不显示坐标轴刻度线
								},
								axisLabel: {
									//y轴文字的配置
									textStyle: {
										color: "rgba(215, 215, 215, 1)",
									},
									// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
								},
								axisLine: {
									lineStyle: {
										opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
									}
								},
							},
							series: series
						};

						option && myChart.setOption(option);
					}
				}, 1000)
			},
		}
	}
</script>

<style scoped>
	.date-item>>>.el-input__prefix,
	.date-item>>>.el-input__suffix {
		display: none !important;
	}

	.date-item>>>.el-input__inner {
		height: unset !important;
		padding: 0 2px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #555 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 15px !important;
		width: 80px !important;
	}
</style>